import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import * as GUI from 'lil-gui';
const {
  RectAreaLightHelper,
} = require('three/examples/jsm/helpers/RectAreaLightHelper');
export default function index() {
  const moundRef = useRef(null);
  useEffect(() => {
    const gui = new GUI.GUI();

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    camera.position.set(0, 0, 15);
    scene.add(camera);
    /* light  */
    // 1、ambientLight 环境光 颜色、强度
    const ambientLight = new THREE.AmbientLight(0xffffff, 1);
    scene.add(ambientLight);

    // 2、directionalLight 方向光-平行光 颜色、强度
    const directionalLight = new THREE.DirectionalLight(0x640404, 0.5);
    const directionalLightHelper = new THREE.DirectionalLightHelper(
      directionalLight,
      5,
      0xffff00
    );
    directionalLight.position.set(10, 10, 10);
    // scene.add(directionalLight, directionalLightHelper);

    // 3、spotLight 聚光灯(类似手电筒) 颜色、强度、距离、光的角度、边缘衰减
    const spotLight = new THREE.SpotLight(0x046434, 0.5, 3, Math.PI * 0.3, 0.2);
    const spotLightHelper = new THREE.SpotLightHelper(spotLight);
    spotLight.position.set(5, 10, 10);
    spotLight.target.position.set(0, 0, 0); // 光的方向 指向目标的位置 必须在scene.add()后设置 否则会报错
    // scene.add(spotLight, spotLight.target, spotLightHelper);

    // 4、pointLight 点光源(类似灯泡) 颜色、强度、距离、衰减
    const pointLight = new THREE.PointLight(0x340464, 20, 10, 2);
    const pointLightHelper = new THREE.PointLightHelper(pointLight, 3);
    pointLight.position.set(-2.1, -0.3, 1.9);
    // scene.add(pointLight, pointLightHelper);

    // 5、 rectAreaLight 矩形区域光（类似打光灯） 颜色、强度、宽度、高度
    const rectAreaLight = new THREE.RectAreaLight(0x346404, 50, 5, 5);
    const rectAreaLightHelper = new RectAreaLightHelper(rectAreaLight); // 矩形区域光辅助器需要引入
    rectAreaLight.position.set(-3, 0.6, 3.4);
    rectAreaLight.lookAt(0, 0, 0); // 光的方向 light是object3D的子类，所以可以使用lookAt方法 除了聚光灯
    // scene.add(rectAreaLight, rectAreaLightHelper);

    // 6、 hemisphereLight 半球光 上半部分颜色、下半部分颜色、强度
    const hemisphereLight = new THREE.HemisphereLight(0xf5810c, 0x80f50c, 0.5);
    const hemisphereLightHelper = new THREE.HemisphereLightHelper(
      hemisphereLight,
      5,
      0xffff00
    );
    hemisphereLight.position.set(0, 10, 10);
    scene.add(hemisphereLight, hemisphereLightHelper);

    // 创建几何体
    const circleMesh = new THREE.Mesh(
      new THREE.SphereGeometry(1, 32, 32), // 参数 半径 经度分段数 纬度分段数
      new THREE.MeshStandardMaterial({ color: 0xededed }) // 使用支持光照的材质
    );
    circleMesh.position.set(0, 0, 1);
    const planeMesh = new THREE.Mesh(
      new THREE.PlaneGeometry(10, 10),
      new THREE.MeshBasicMaterial({ color: 0x343434, side: THREE.DoubleSide })
    );
    scene.add(circleMesh, planeMesh);

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    moundRef.current.appendChild(renderer.domElement);

    const orbitControls = new OrbitControls(camera, moundRef.current);
    const animate = () => {
      orbitControls.update();
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };
    animate();
  }, []);
  return <div ref={moundRef} />;
}
